<template>
  <Form :formData="searchFormData" 
              @searchFormReset="searchFormReset" @search="search"></Form>

  <div class="newBox">
      <button class="bt wt-120" @click="openAddDialog()">新增护理项目</button>
  </div>

  <TableList :data="data" :pagination="pagination" :total = "total"
            @pageSizeChange="onPageSizeChange" @pageNumChange="onCurrentChange"
            @openEditDialog="openEditDialog"
            @handleDelete="handleDelete"
            @handleDisable = "handleDisable"
            @handleEnable = "handleEnable"></TableList>

  <DialogForm ref="dialogFormRef" :visible="dialogFormVisible" :title="dialogFormTitle" :data="dialogFormData"
              @dialogClose="dialogClose" @dialogSave="dialogSave" @handleDisable = "handleDisable"
              @handleEnable = "handleEnable"></DialogForm>

  <OperateDialog :visible="operateDialogVisible" :title="operateDialogTitle" :content="operateDialogContent"
                 @close="operateDialogClose" @confirm="operateDialogConfirm"></OperateDialog>
</template>

<script setup lang="jsx">
import { ref, onMounted} from 'vue';
import { BrowseIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next'
import { getProjectList, projectAdd, getProjectDetails, projectUpdate, projectDelete, projectStatus } from '@/api/serve'
import TableList from './components/TableList.vue'
import Form from './components/Form.vue'
import DialogForm from './components/DialogForm.vue'
import OperateDialog from './components/OperateDialog.vue'

// operate dialog 删除
const operateDialogVisible = ref(false)
const operateDialogTitle = ref('')
const operateDialogContent = ref('')
let row = null;
let rowOpType = null;//1删除 2禁用 3启用
const handleDelete = (r)=>{
operateDialogVisible.value = true;
operateDialogTitle.value="确认删除"
operateDialogContent.value="此操作将删除该护理项目，是否继续？"
row = r;
rowOpType = 1;
}
const operateDialogClose = ()=>{
operateDialogVisible.value = false;
}
// 启用禁用
const handleDisable = (r)=>{
 operateDialogVisible.value = true;
 operateDialogTitle.value="确认禁用"
 operateDialogContent.value="此操作将禁用该护理项目，是否继续？"
 row = r;
 rowOpType = 2;
}
const handleEnable = (r)=>{
 operateDialogVisible.value = true;
 operateDialogTitle.value="确认启用"
 operateDialogContent.value="此操作将启用该护理项目，是否继续？"
 row = r;
 rowOpType = 3;
}


const operateDialogConfirm = async()=>{
if(!row){
    MessagePlugin.error("没有id无法操作");
    return;
}
// 调用后端接口
let res = null;
if(rowOpType == 1){
    res = await projectDelete(row.id);
}else if(rowOpType == 2){
    res = await projectStatus({id:row.id, status:0});
}else if(rowOpType == 3){
   res = await projectStatus({id:row.id, status:1});
}else{
   MessagePlugin.error('操作不支持'); 
   return;
}
if(res.code == 200){
      // 成功
      MessagePlugin.success('操作成功'); 
      // 刷新页面
      query();
      // 关闭dialog
      operateDialogVisible.value = false;
  }else{
      MessagePlugin.error(res.msg);
  }
}

// 列表相关
const data = ref([]);
const total = ref(0)
const pagination = ref({
pageNum:1,
pageSize:10
});
const searchFormData = ref({ name:'',status:''})
const onPageSizeChange = ()=>{
query();
}
const onCurrentChange = ()=>{
query();
}
onMounted(()=>{
query();
})
const query = async ()=>{
const param = {
  pageNum: pagination.value.pageNum,
  pageSize: pagination.value.pageSize,
  name: searchFormData.value.name,
  status: searchFormData.value.status
}
const res = await getProjectList(param);
if(res.code == 200){
    data.value = res.data.records;
    total.value = res.data.total;
}
}
const searchFormReset = ()=>{
searchFormData.value = { name:'',status:''}
query();
}
const search = ()=>{
query();
}

//新增修改dialog
const dialogFormVisible = ref(false)
const dialogFormTitle = ref('');
const dialogFormData = ref({
name:'',
price:'',
unit:'',
orderNo:'',
status:'',
image:'',
nursingRequirement:''
})
const openAddDialog = ()=>{
dialogFormVisible.value = true
dialogFormTitle.value = '新增'
}
const openEditDialog = async (row)=>{
// console.log(row)
// 回显查询
const res = await getProjectDetails(row.id);
if(res.code == 200){
  dialogFormVisible.value = true
  dialogFormTitle.value = '修改'
  dialogFormData.value = res.data;
}else{
   MessagePlugin.error(res.msg);
}
}
const dialogClose = ()=>{
 dialogFormVisible.value = false
 dialogFormData.value = {
    name:'',
    price:'',
    unit:'',
    orderNo:'',
    status:'',
    image:'',
    nursingRequirement:''
  }
}
const dialogFormRef = ref(null)
const dialogSave = async (data)=>{
  let res = null
  if(data.id){
    // 修改
    res = await projectUpdate(data);
  }else{
    // 新增
    res = await projectAdd(data);
  }
  if(res.code == 200){
      // 成功
      MessagePlugin.success('操作成功'); 
      // 刷新页面
      query();
      // 关闭dialog
      dialogClose();
      // 调用子组件的方法
      // dialogFormRef.value.handleClear();
  }else{
      MessagePlugin.error(res.msg);
  }
}
</script>